<template>
	<div class="music-list">
		<div class="back" @click="back">
			<i class="icon-back"></i>
		</div>
		<h1 class="title" v-html="title"></h1>
		<div class="bg-image" :style="bgStyle" ref="bgImage">
			<div class="play-wrapper">
				<div class="play" v-show="songs.length > 0" ref="playBtn" @click="random">
					<i class="icon-play"></i>
					<span class="text">随机播放全部</span>
				</div>
			</div>
			<div class="filter" ref="filter"></div>
		</div>
		<div class="bg-layer" ref='layer'></div>
		<!-- 把songs作为data传进去： 为了计算scroll组件的高度 -->
		<scroll
			@scroll="scroll"
			:probe-type="probeType" 
			:listen-scroll="listenScroll" 
			:data="songs" 
			class="list"
			ref="list"> 
			<div class="song-list-wrapper">
				<song-list :rank="rank" @select="selectItem" :songs="songs"></song-list>
			</div>
			<div class="loading-content" v-show="!songs.length">
				<loading></loading>
			</div>
		</scroll>
	</div>
</template>

<script>
	
	import Scroll from '@/base/scroll/scroll'
	import Loading from '@/base/loading/loading'
	import SongList from '@/base/song-list/song-list'
	import { prefixStyle } from '@/common/js/dom'
	import { mapActions } from 'vuex'
	import { playlistMixin } from '@/common/js/mixin'

	// 定义预留 40的偏移量
	const  RESERVED_HEIGHT = 40
	const transform = prefixStyle('transform')
	const backdrop = prefixStyle('backdrop-filter')
	
	export default {
		mixins: [playlistMixin],
		// 子组件通过props来接收数据: 
		props: {
			// 背景图片
			bgImage: {
				type: String,
				default: ''
			},
			songs: {
				type: Array,
				default: []
			},
			title: {
				type: String,
				default: ''
			},
			// 排行
			rank: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				scrollY: 0
			}
		},
		computed: {
			bgStyle() {
				return `background-image:url(${this.bgImage})`
			}
		},

		mounted() {
			// 记录imageHeight
			this.imageHeight = this.$refs.bgImage.clientHeight
			// 记录最小滚动高度
			this.minTranslateY = -this.imageHeight + RESERVED_HEIGHT
			// scroll滚动组件的高度等于 背景图的高度
			this.$refs.list.$el.style.top = `${this.imageHeight}px`
		},

		methods: {
			handlePlaylist (playlist) {
				const bottom = playlist.length > 0 ? '60px' : ''
				this.$refs.list.$el.style.bottom = bottom
				this.$refs.list.refresh()
			},
			// 滚动的时候监听
			// 实时拿到scrollY的值
			scroll(pos) {
				this.scrollY = pos.y
			},
			back() {
				this.$router.back()
			},
			selectItem(item, index) {
				this.selectPlay({
					list: this.songs,
					index
				})
			},
			random() {
				this.randomPlay({
					list: this.songs
				})
			},
			...mapActions([
				'selectPlay',
				'randomPlay'
			])
		},
		watch: {
			scrollY(newY) {
				// 最远滚动距离不超过 this.minTranslateY
				let translateY = Math.max(this.minTranslateY, newY)
				let zIndex = 0
				let scale = 1
				let blur = 0
				this.$refs.layer.style[transform] = `translate3d(0, ${translateY}px, 0)`
				// this.$refs.layer.style[`webkitTransform`] = `translate3d(0, ${translateY}px, 0)`
				
				const percent = Math.abs(newY / this.imageHeight)
				// 如果列表下拉的话，图片scale放大
				if(newY > 0) {
					scale = 1 + percent
					zIndex = 14
				} else {
					// 最大模糊程度为 20
					blur = Math.min(20 * percent, 20)
				}
				this.$refs.filter.style[backdrop] = `blur(${blur}px)`
				// this.$refs.filter.style['webkitBackdrop-filter'] = `blur(${blur}px)`
				// 如果scroll 滚动到顶部，改变其z-index
				if (newY < this.minTranslateY) {
					zIndex = 10
					this.$refs.bgImage.style.paddingTop = 0
					this.$refs.bgImage.style.height = `${RESERVED_HEIGHT}px`
					this.$refs.playBtn.style.display = 'none'
					
				} else {
					this.$refs.bgImage.style.paddingTop = '70%'
					this.$refs.bgImage.style.height = 0
					this.$refs.playBtn.style.display = ''

				}
				this.$refs.bgImage.style.zIndex = zIndex
				this.$refs.bgImage.style[transform] = `scale(${scale})`
				// this.$refs.bgImage.style[`webkitTransform`] = `scale(${scale})`
			}
		},
		components: {
			Scroll,
			SongList,
			Loading
		},

		created() {
			this.probeType = 3
			// 监听滚动
			this.listenScroll = true
		}
	}
</script>

<style lang="stylus" scoped>
	
	@import '~common/stylus/variable'
	@import '~common/stylus/mixin'
	
	.music-list
		position: fixed
		z-index: 100
		top: 0
		left: 0
		bottom: 0
		right: 0
		background: $color-background
		.back
			position absolute
			top: 0
			left: 6px
			z-index: 50
			.icon-back
				display: block
				padding: 10px
				font-size: $font-size-large-x
				color: $color-theme
		.title
			position: absolute
			top: 0
			left: 10%
			z-index: 40
			width: 80%
			no-wrap()
			text-align: center
			line-height: 40px
			font-size: $font-size-large
			color: $color-text
		.bg-image
			position: relative
			width: 100%
			height: 0
			padding-top: 70%
			transform-origin: top
			background-size: cover
			.play-wrapper
				position: absolute
				bottom: 20px
				z-index: 50
				width: 100%
				.play
					box-sizing: border-box
					width: 135px
					padding: 7px 0
					margin: 0 auto
					text-align: center
					border: 1px solid $color-theme
					color: $color-theme
					border-radius: 100px
					font-size: 0
					.icon-play
						display: inline-block
						vertical-align: middle
						margin-right: 6px
						font-size: $font-size-medium-x
					.text
						display: inline-block
						vertical-align: middle
						font-size: $font-size-small
			.filter
				position: absolute
				top: 0
				left: 0
				width: 100%
				height: 100%
				background: rgba(7, 17, 27, 0.4)
		.bg-layer
			position: relative
			height: 100%
			background: $color-background
		.list
			position: fixed
			top: 0
			bottom: 0
			width: 100%
			background: $color-background
			.song-list-wrapper
				padding: 20px 30px
			.loading-container
				position: absolute
				width: 100%
				top: 50%
				transform: translateY(-50%)

</style>